//重载 bootstrap 中关于颜色的部分
@mixin button-variant($color, $background, $border) {
	$active-background: darken($background, 10%);
	$active-border: darken($border, 12%);

	color: $color;
	background-color: $background;
	border-color: $border;
	@include box-shadow($btn-box-shadow);

	// Hover and focus styles are shared
	&:focus,
	&:hover {
		color: $color;
		background-color: $active-background;
		border-color: $active-border;
	}
	&:focus,
	&.focus {
		// Avoid using mixin so we can pass custom focus shadow properly
		@if $enable-shadows {
			box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
		} @else {
			box-shadow: 0 0 0 2px rgba($border, .5);
		}
	}

	// Disabled comes first so active can properly restyle
	&.disabled,
	&:disabled {
		background-color: $background;
		border-color: $border;
	}

	&:active,
	&.active,
	.show > &.dropdown-toggle {
		color: $color;
		background-color: $active-background;
		background-image: none; // Remove the gradient for the pressed/active state
		border-color: $active-border;
		@include box-shadow($btn-box-shadow);
	}
}

@mixin button-outline-variant($color, $color-hover: $color-lightest) {
	color: $color;
	background-image: none;
	background-color: transparent;
	border-color: $color;

	&:focus,
	&:hover {
		color: $color-hover;
		background-color: $color;
		border-color: $color;
	}

	&:focus,
	&.focus {
		box-shadow: 0 0 0 2px rgba($color, .5);
	}

	&.disabled,
	&:disabled {
		color: $color;
		background-color: transparent;
	}

	&:active,
	&.active,
	.show > &.dropdown-toggle {
		color: $color-hover;
		background-color: $color;
		border-color: $color;
	}
}
